<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport"
	content="width=device-width, initial-scale=1, maximum-scale=1">
<base href="http://localhost:8080/vote/" />
<link rel="stylesheet" href="layui/css/layui.css">
<link rel="stylesheet" href="admin/view.css" />
<link rel="icon" href="/favicon.ico">
<title>在线投票后台</title>
<style type="text/css">
	.laytable-cell-1-playerimage{
		height: 100%;
		max-width: 100%;
	}
	.layui-table-cell{
		height: auto;
		line-height: 56px;
		text-align: center;
	}
</style>
</head>
<body class="layui-view-body">
	<div class="layui-content">
		<div class="layui-page-header">
			<div class="pagewrap">
				<h2 class="title">选手信息</h2>
			</div>
		</div>
		<div class="layui-row">
			<div class="layui-card">
				<div class="layui-card-body">
					<div class="form-box">
						<div class="layui-form layui-form-item">
							<div class="layui-inline">
								<div class="layui-form-mid">选手编号:</div>
								<div class="layui-input-inline" style="width: 100px;">
									<input type="text" autocomplete="on" class="layui-input" id="qplayerNo"/>
								</div>
								<div class="layui-form-mid">选手姓名:</div>
								<div class="layui-input-inline" style="width: 100px;">
									<select name="quserloginname" id="qplayerName">
									</select>
								</div>
								<button class="layui-btn layui-btn-blue" id="query" data-type="reload">查询</button>
								<button class="layui-btn layui-btn-primary" id="reset">重置</button>
							</div>
						</div>
						<button class="layui-btn layui-btn-blue" id="addemployee">
							<i class="layui-icon">&#xe654;</i>新增
						</button>
						<table id="table" lay-filter="tableTool"></table>
					</div>
				</div>
			</div>
		</div>
	</div>
	<!-- 	弹出框 -->
	<div id="content" style="display: none">	
<form class="layui-form" action="" method="post" enctype="multipart/form-data" lay-filter="user-edit">
    <div class="layui-form-item" style="margin-top:15px;width:500px;">
      <label class="layui-form-label">头像</label>
      <div class="layui-upload">
      <div class="layui-upload-list">
      <div class="upload-img"></div>
            <p id="demoText"></p>
		    <button type="button" class="layui-btn layui-btn-img" id="headimg" >上传头像</button>
      </div> 
      </div>
    </div>
  
    <div class="layui-form-item" style="margin-top:15px;width:500px;" id="divplayerId">
    <label class="layui-form-label">选手流水号</label>
    <div class="layui-input-block">
      <input type="text" id="playerId" autocomplete="off" class="layui-input">
    </div>
    </div>
  
    <div class="layui-form-item" style="margin-top:15px;width:500px;">
    <label class="layui-form-label">选手编号</label>
    <div class="layui-input-block">
      <input type="text" id="playerNo" lay-verify="required|playerNo" placeholder="请输入选手编号" autocomplete="on" class="layui-input">
    </div>
    </div>
  
    <div class="layui-form-item" style="margin-top:15px;width:500px;">
      <label class="layui-form-label">选手姓名</label>
      <div class="layui-input-block">
        <input type="text" id="playerName" lay-verify="required|playerName" placeholder="请输入选手姓名" autocomplete="off" class="layui-input">
      </div>
    </div>
    
    <div class="layui-form-item">
    <div class="layui-input-block">
      <button class="layui-btn" lay-submit="" lay-filter="update-submit">提交</button>
      <button type="reset" class="layui-btn layui-btn-primary">重置</button>
    </div>
 	</div>
</form>
	</div>
	<script src="layui/layui.js"></script>
	<script>
		resultpic='';
		layui.use([ 'element', 'table', 'form', 'layer', 'jquery', 'laydate', 'upload', 'layedit'], function(
				element, table, form, layer, $, laydate, upload, layedit) {
			//选手姓名下拉框
			var $qplayerName=$("#qplayerName");//查询
			var $aplayerName=$("#playerName");//添加
			$qplayerName.append("<option value='' checked>请选择</option>");
			$aplayerName.append("<option value='' checked>请选择</option>");
			$.get("player/preplayer",function(data){
						var str = "";
          				for(i in data){
          					str = "<option value='"+data[i].playerid+"'>"+data[i].playername+"</option>";     
          					$qplayerName.append(str);
          					$aplayerName.append(str);
          					form.render('select');
          				}
				},'json');
			//重置按钮
			$("#reset").on("click",function () {
    			$("input[type=text]").val("");
    			$("#qplayerName").val("");
   			 });
			//验证
			form.verify({
				playerNo: function(value) {
				      if(value.length < 3){
				          return '选手编号至少得3个字符';
				        }
				      if(!new RegExp("^[a-zA-Z0-9_\u4e00-\u9fa5\\s·]+$").test(value)){
				        return '选手编号不能有特殊字符';
				        }
				      },
				playerName:function(value) {
				      if(value.length < 2){
				          return '选手姓名至少得2个字符';
				        }
				      }
			});
			//弹出层提交
			form.on('submit(update-submit)', function () {
				$.ajax({
						url : url,
						type : 'post',
						dataType : 'text',
						data : {
							"playerId" : $("#playerId").val(),
							"playerNo" : $("#playerNo").val(),
							"playerName" : $("#playerName").val(),
							"playerImage" : resultpic 
						},
						success : function(data) {
							if (data == 1) {
								layer.msg('操作成功');
								self.setInterval(function(){  // 这个方法是说在延迟两秒后执行大括号里的方法
								      location.reload();   // 这个方法是刷新当前页面
								      },1000);
							} else{
								layer.msg('操作失败');
							}
						}
					});
				return false;//阻止提交
			});
			//创建编辑器
			//layedit.build('一个id');
			
			upload.render({
			    elem: '#headimg'
			    ,method:'post'
			    ,url: 'player/uploadHeadImage'    
			    ,done: function(res){
			      //如果上传失败
			      if(res.code > 0){
			        return layer.msg('上传失败');
			      }
			      //上传成功
			      if(res.code==0){
			    	var array = [];
			    	array=res.src.split("/");
			    	resultpic = array[1];//resultpic为全局变量
			    	console.log(resultpic);
			        $('.upload-img').html('<img class="layui-upload-img" style="width:80px;height:100px" src="/'+res.src+'" id="demo1"> <p id="demoText"></p>');
			        $('.layui-btn-img').css({"margin-left":"104px","width":"90px","margin-top":"6px"});
			        $('.layui-btn-img').text("重新上传");      
			        return layer.msg('上传成功',{time:2000});
			      }
			    }
			  });
// 			form.val('user-edit', {   
// 			    "gender":'${user.gender}'
// 			  });
			//展示已知数据
			table.render({
				elem : '#table',
				method : 'post',
				url : 'player/findplayerdynamic',
				cellMinWidth : 80,
				cols : [ [ {
					field : 'playerid',
					title : 'ID',
					sort : true
				}, {
					field : 'playerno',
					title : '编号'
				}, {
					field : 'playername',
					title : '选手姓名'
				},{
					field : 'playerimage',
					templet : '<div><img src="/images/{{d.playerimage}}"/></div>',
					title : '图片'
				},{
					field : 'right',
					title : '操作',
					toolbar : '#barDemo'
				} ] ],
				id : 'testReload',
				skin : 'line', //表格风格
				even : true,
				page : true //是否显示分页
				,
				limits : [ 5, 7, 10 ],
				limit : 5
// 				done: function(res, curr, count){
// 				    //如果是异步请求数据方式，res即为你接口返回的信息。
// 				    //如果是直接赋值的方式，res即为：{data: [], count: 99} data为当前页数据、count为数据总长度
// 				    for(i in res.data){
//       					str = "<option value='"+res.data[i].playername+"'>"+res.data[i].playername+"</option>";
//       					$qplayerName.append(str);
//       					$aplayerName.append(str);
//       					form.render('select');
//       				}
				    
// 				    //得到当前页码
// 				    //console.log(curr); 
				    
// 				    //得到数据总量
// 				    //console.log(count);
// 				  }
			//每页默认显示的数量
			});

			//监听工具条
			table.on('tool(tableTool)', function(obj) { //注：tool是工具条事件名，tableTool是table原始容器的属性 lay-filter="对应的值"
				var data = obj.data; //获得当前行数据
				var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
				var tr = obj.tr; //获得当前行 tr 的DOM对象

				if (layEvent === 'detail') { //查看
					layer.msg('选手：' + data.playername + '的查看操做');
				} else if (layEvent === 'del') { //删除
					//console.log("删除");
					layer.confirm('确认删除' + data.playername + '？',
							function(index) {
								//do something
								$.ajax({
									type : "post",
									url : "player/deleteplayer",
									dataType : 'json',
									data : "playerId=" + data.playerid,
									success : function(data) {//成功返回1
										if (data == 1) {
											obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
											layer.close(index);
											layer.msg('成功删除');
										} else {
											layer.msg('删除失败');
										}
									},
									error : function() {
										layer.msg('操作失败');
									}
								});
							});
				} else if (layEvent === 'edit') { //编辑
					console.log(data.playerid);
					$("#playerId").val(data.playerid);
					$("#playerName").val(data.playername);
					$("#playerNo").val(data.playerno);
					//do something
					url='player/updateplayer';
					layer.open({
						type : 1,
						title : "编辑选手",
						btn : ['取消'],//yes->添加==btn1->添加,btn2类推对应数组
						area : [ '600px', '450px' ],
						content : $("#content"),
						anim : 3,
						success : function() {
							$("#playerId").attr("readonly","true");
						},
// 						yes : function() {
// 							$.ajax({
// 								url : 'player/updateplayer',
// 								type : 'post',
// 								dataType : 'text',
// 								data : $("#updateplayer").serialize(),
// 								success : function(data) {
// 									if (data == 1) {
// 										layer.msg('修改成功');
// 										location.reload();
// 									} else {
// 										layer.msg('修改失败');
// 									}
// 								}
// 							});
// 						},
						end: function() {//无论是确认还是取消，只要层被销毁了，end都会执行
							url='';
							$("#playerId").removeAttr("readonly");
						}
					});
				}

			});
			
			
    //顶部查询，table.reload方法
	var active = {
    	reload: function(){
//       		var demoReload = $('#demoReload');//为了取input的值
          		//执行重载
      		table.reload('testReload', {//testReload:第一次加载table.render中指定的id
        			page: {
          				curr: 1 //重新从第 1 页开始
        					}
        			,where: {
          			
          				"playerNo" : $("#qplayerNo").val(),
						"playerId" : $("#qplayerName").val()
        		}
      }, 'data');
    }
	}		
	$("#query").on('click', function(){
	    var type = $(this).data('type');
	    active[type] ? active[type].call(this) : '';
	  });
			
			//顶部新增
			$("#addemployee").click(function() {
// 				$("#data tr:first").css("display","");
//				$("#employeecode").removeAttr("readonly");
//				$("#employeecode").removeAttr("readonly");
				$("#divplayerId").css("display","none");
				url='player/addplayer';
				layer.open({
					type : 1,
					title : "添加选手",
					btn : [ '取消'],//yes->添加==btn1->添加,btn2类推对应数组
					area : [ '600px', '450px' ],
					content : $("#content"),
					anim : 3,
					success : function() {
						$("input[type='text'],input[type='password'],input[type='date']").val("");
					},
// 					yes : function() {
// 						$.ajax({
// 							url : 'player/addplayer',
// 							type : 'post',
// 							dataType : 'text',
// 							data : {
// 								"playerNo" : $("#playerNo").val(),
// 								"playerName" : $("#playerName").val(),
// 								"playerImage" : resultpic 
// 							},
// 							success : function(data) {
// 								if (data == 1) {
// 									layer.msg('添加成功');
// 									location.reload();
// 								} else {
// 									layer.msg('添加失败');
// 								}
// 							}
// 						});
// 						//display=none
// 						},
					end: function() {//无论是确认还是取消，只要层被销毁了，end都会执行
// 						$("#playerId").removeAttr("readonly");
						$("#divplayerId").css("display","");
						url='';
					}
				});
			});
		});
	</script>
	<!-- tools -->
	<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
	</script>
</body>
</html>